<template>
  <div class="company">
    <div class="header-search">
      <div class="row">
        <p class="title">企业名称:</p>
        <input
          type="text"
          placeholder="按企业名称查询"
          v-model="likeName"
          style="margin-top:5px;"
          @blur="search()">
      </div>
      <div class="row">
        <p class="title">公司规模:</p>
        <ul class="row">
          <li
            class="option"
            :class="{ chosen: sel1 === s.key }"
            v-for="s of scale"
            :key="s.key"
            @click="sel1 = s.key">{{ s.value }}</li>
        </ul>
      </div>
      <div class="row">
        <p class="title">融资阶段:</p>
        <ul class="row">
          <li
            class="option"
            :class="{ chosen: sel2 === f.key }"
            v-for="f of finacial"
            :key="f.key"
            @click="sel2 = f.key">{{ f.value }}</li>
        </ul>
      </div>
    </div>
    <main>
      <main>
        <ul>
          <li v-for="c of company" @click="getDetail(c.id)" :key="c.id">
            <div class="sub-li">
              <div class="company-info">
                <img width="57" height="57" :src="c.ico">
                <div class="info-box">
                  <p style="font-size:17px;margin-bottom:5px">{{c.name}}</p>
                  <p style="font-size:12px">
                    {{c.financing}}<i class="inline"></i>{{c.scale}}
                  </p>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </main>
      <footer>
        <Pages
            @setCurPage="setCurPage"
            :curPage="curPage"
            :total="total"
            :pageSize="pageSize"></Pages>
      </footer>
    </main>
  </div>
</template>
<script>
import Switcher from '@/components/Switch/index';
import Pages from '@/components/Pages/index';
import api from '@/api/company';
import nginx from '@/assets/nginxconfig';

export default {
  name: 'Company',
  data() {
    return {
      useDesire: true,
      onHover: false,
      curPage: 1,
      total: 100,
      pageSize: 10,
      likeName: '',
      nginxAddress: '',
      sel1: '',
      sel2: '',
      company: [],
      scale: [
        { key: '', value: '不限' },
        { key: '0', value: '1-10人' },
        { key: '1', value: '11-50人' },
        { key: '2', value: '51-100人' },
        { key: '3', value: '101-500人' },
        { key: '4', value: '501-1000人' },
        { key: '5', value: '1001-5000人' },
        { key: '6', value: '5001-10000人' },
        { key: '7', value: '>10000人' },
      ],
      finacial: [
        { key: '', value: '不限' },
        { key: '0', value: '天使轮' },
        { key: '1', value: 'A轮' },
        { key: '2', value: 'B轮' },
        { key: '3', value: 'C轮' },
        { key: '4', value: '不需要融资' },
      ],
    };
  },
  mounted() {
    this.nginxAddress = nginx.address;
    this.search();
  },
  watch: {
    sel1() {
      this.search();
    },
    sel2() {
      this.search();
    },
  },
  methods: {
    getDetail(p) {
      this.$router.push({ path: '/company/companyInfo', query: { id: p } });
    },
    search() {
      const params = new URLSearchParams();
      params.append('financing', this.sel2);
      params.append('scale', this.sel1);
      params.append('name', this.likeName);
      params.append('rows', this.pageSize);
      params.append('page', this.curPage);
      api.queryBCompanyPlusByPaginationWoAuApi(params).then(async (response) => {
        this.total = response.data.total;
        const datas = response.data.rows;
        this.company = [];
        for (let i = 0; i < datas.length; i += 1) {
          this.company.push({
            id: datas[i].businessId,
            name: datas[i].name,
            financing: this.getFinName(datas[i].financing),
            scale: this.getScaName(datas[i].scale),
            ico: nginx.nginxaddress + datas[i].ico,
          });
        }
      });
    },
    setCurPage(page) {
      this.curPage = page;
    },
    getFinName(id) {
      switch (id) {
        case '0':
          return '天使轮';
        case '1':
          return 'A轮';
        case '2':
          return 'B轮 ';
        case '3':
          return 'C轮';
        case '4':
          return '不需要融资';
        default:
          return null;
      }
    },
    getScaName(id) {
      switch (id) {
        case '0':
          return '1-10人';
        case '1':
          return '11-50人';
        case '2':
          return '51-100人 ';
        case '3':
          return '101-500人';
        case '4':
          return '501-1000人';
        case '5':
          return '1001-5000人';
        case '6':
          return '5001-10000人';
        case '7':
          return '>10000人';
        default:
          return null;
      }
    },
  },
  components: {
    Switcher,
    Pages,
  },
};
</script>
<style lang="less">
@import url(../../static/style/site.vars.less);
.company {
  width: 1200px;
  margin: 0 auto;
  .header-search {
    padding: 25px 30px;
    background: #fff;
    .row {
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .title {
        font-size: 14px;
        height: 100%;
        min-width: 70px;
        margin: 10px 0;
        margin-right: 10px;
      }
      ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin: 10px 0;
        li {
          height: 100%;
          // float: left;
          list-style: none;
          margin-right: 20px;
          display: flex;
          align-items: center;
          font-size: 14px;
          &.option {
            color: #757679;
            cursor: pointer;
            user-select: none;
            &:hover {
              transition: color .3s ease;
              color: rgb(0, 119, 255);
            }
            &.chosen {
              color: rgb(0, 119, 255);
            }
          }
        }
      }
    }
  }

  &>main {
    margin-top: 10px;
    &>header {
      height: 40px;
      padding: 0 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 2px solid #EFF6FF;

      background: #fff;
      .switcher-box {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        p.switch {
          font-size: 12px;
          margin-left: 10px;
          cursor: pointer;
          user-select: none;
        }
        &:hover {
          p.switch {
            transition: .1s color ease;
            color: @site-main;
          }
        }
      }
      .job-desire-box {
        margin-left: 25px;
        font-size: 13px;
        cursor: pointer;
        position: relative;
        .chosen {
          color: @site-main;
          height: 40px;
          padding-top: 20px;
        }
        &:hover {
          ul {
            display: block;
          }
        }
        ul {
          list-style: none;
          position: absolute;
          background: #fff;
          border: 1px solid #dbdbdb75;
          width: 284px;
          left: -25px;
          top: 50px;
          box-shadow: 0 3px 6px rgba(6,0,1,.05);
          &:hover {
            display: block;
          }
          li {
            padding: 10px 25px;
            &:hover {
              background: rgba(184, 184, 184, 0.109);
              color: @site-main;
            }
          }
        }
      }
    }
    &>main {
      ul {
        font-size: 0;
        li {
          box-sizing: border-box;
          font-size: 14px;
          list-style: none;
          display: inline-block;
          width: 240px;
          background: #fff;
          .sub-li {
            border-left: 2px solid #EFF6FF;
            border-bottom: 2px solid #EFF6FF;
            margin-left: -2px;
            padding: 20px;
            cursor: pointer;
            &:hover {
              box-shadow: 5px 5px 20px rgba(0,0,0,.05);
              border-bottom-color: #eaebef;
              border-left-color: #edeef2;
              position: relative;
              z-index: 10;
            }
            .company-info {
              display: flex;
              justify-content: left;
              align-items: center;
              .info-box {
                height: 57px;
                flex: 1;
                text-align: right;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-end;
              }
            }
          }
        }
      }
    }
    footer {
      padding: 15px 0;
      background: #fff;
      text-align: center;
    }
  }
  .inline {
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
  }
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0;
  }
}
</style>

